<template>
  <input
    v-if="mode === 'input'"
    class="form-input"
    :type="inputType"
    :placeholder="placeholder"
    :value="value"
    :autofocus="autofocus"
    @input="updateValue($event)" />
  <textarea
    v-else-if="mode === 'textarea'"
    class="form-textarea"
    :placeholder="placeholder"
    :value="value"
    :autofocus="autofocus"
    @input="updateValue($event)"></textarea>
</template>

<script setup>
const { value, inputType, placeholder, mode, autofocus } = defineProps({
  mode: {
    type: String,
    default: "input",
  },
  inputType: {
    type: String,
    default: "text",
  },
  value: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  autofocus: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(["updateValue"])
const updateValue = (e) => {
  emit("updateValue", e.target.value)
}
</script>

<style scoped>
.form-input,
.form-textarea {
  flex: 1;
  padding: 14px;
  border-radius: var(--border-radius);
  border: 2px solid var(--glass-border);
  background: rgba(var(--bg-darker-rgb), 0.1);
  color: var(--text);
  font-size: 1rem;
  transition: var(--transition);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}
</style>
